<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
		<title>ToDoList</title>
		<meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
      header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
      section{margin:0 auto;}
      label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
      header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
      input:focus{outline-width:0}
      h2{position:relative;}
      span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
      ol,ul{padding:0;list-style:none;}
      li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
      p{margin: 0;}
      li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
      li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
        padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
      ol li{cursor:move;}
      ul li{border-left: 5px solid #999;opacity: 0.5;}
      li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
      footer{color:#666;font-size:14px;text-align:center;}
      footer a{color:#666;text-decoration:none;color:#999;}
      @media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
      @media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}
      [v-cloak] {display: none!important;}
    </style>
	</head>
	<body>
    <div id="app">
      <header>
        <section>
          <form action="javascript:;" id="form">
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" 
              required="required" autocomplete="off" v-model.lazy.trim="msg"
              @keyup.enter="addItem"
            />
          </form>
        </section>
      </header>
      <section>
        <h2>正在进行 <span id="todocount" v-text="todoList.length"></span></h2>
        <ol id="todolist" class="demo-box">
          <li draggable="true" v-for="(item, index) in todoList"
            @drag="startSort(index)" @dragover.prevent @drop="sortItem(index)"
          >
            <input type="checkbox" @click.prevent="changeItem(item, index)" :checked="item.checked">
            <p @click="modifyItem(index)">
              <input v-select v-if="index === modifyIndex" type="text" 
                v-model.lazy.trim="item.msg" @blur="modifyed(item)">
              <template v-else>{{item.msg}}</template>
            </p>
            <a href="" @click.prevent="deleteItem(item, index)">-</a>
          </li>
        </ol>
        <h2>已经完成 <span id="donecount" v-text="doneList.length"></span></h2>
        <ul id="donelist">
          <li draggable="true" v-for="(item, index) in doneList">
            <input type="checkbox" @click.prevent="changeItem(item, index)" :checked="item.checked">
            <p>{{item.msg}}</p>
            <a href="" @click.prevent="deleteItem(item, index)">-</a>
          </li>
        </ul>
      </section>
      <footer>
        Copyright &copy; 2014 todolist.cn <a href="javascript:;" @click.prevent="clearList">clear</a>
      </footer>
    </div>
		
    <script>
      let data = JSON.parse(localStorage.getItem('data'))
      if (!data) {
          data = {
            todoList: [],
            doneList: []
          }
      }

      Vue.directive('select', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
          // 聚焦元素
          el.select()
        }
      })
      const app = new Vue({
        el: '#app',

        data: Object.assign(data, {
          startSortIndex: -1,
          modifyIndex: -1,
          msg: '',
        }),

        methods: {
          addItem () {
            if (!this.msg) return ;

            this.todoList.push({
              msg: this.msg,
              checked: false,
            })
            this.msg = ''
          },

          changeItem (item, index) {
            if (!item.checked) {
              this.doneList.push(item)
              this.todoList.splice(index, 1)
            } else {
              this.todoList.push(item)
              this.doneList.splice(index, 1)
            }

            item.checked = !item.checked
          },

          deleteItem (item, index) {
            if (!item.checked) {
              this.todoList.splice(index, 1)
            } else {
              this.doneList.splice(index, 1)
            }
          },

          modifyItem (index) {
            this.modifyIndex = index
          },

          modifyed () {
            this.modifyIndex = -1
          },

          clearList () {
            this.todoList = []
            this.doneList = []
          },

          startSort (index) {
            this.startSortIndex = index
          },

          sortItem (index) {
            if (this.startSortIndex !== -1 && this.startSortIndex !== index) {
              let start = this.startSortIndex
              let end = index
              let tmp = this.todoList[start]
              Vue.set(this.todoList, start, this.todoList[end])
              Vue.set(this.todoList, end, tmp)
            }
          }
        },

        updated () {
          localStorage.setItem('data', JSON.stringify({
            todoList: this.todoList,
            doneList: this.doneList
          }))
        },
      })
    </script>
	</body>
</html>